<template>
  <div class="online-container">
    <!-- 左侧树形菜单 -->
    <div class="online-left">
      <el-collapse v-model="activeName" accordion @change="handleAccordion">
        <el-collapse-item title="视频列表" name="1">
          <div class="search">
            <el-input
              class="el-put"
              placeholder="请输入"
              suffix-icon="el-icon-search"
              v-model="cameraName"
              @input="searchTree"
            >
            </el-input>
            <!-- <el-button type="primary" icon="el-icon-s-operation"></el-button> -->
          </div>
          <div class="change" @change="changeTab">
            <el-radio-group v-model="tabPosition">
              <el-radio-button label="1">分类</el-radio-button>
              <el-radio-button label="2">行政区划</el-radio-button>
              <el-radio-button label="3">收藏关注</el-radio-button>
            </el-radio-group>
            <!-- :default-expand-all="true" -->
            <el-tree
              class="body-tree"
              :data="data"
              :props="defaultProps"
              @node-click="debouncedHandleNodeClick"
              :default-expanded-keys="openNodes"
              node-key="id"
            >
              <template slot-scope="{ node, data }">
                <span
                  style="display: flex; align-items: center"
                  v-if="data.level == 0"
                >
                  <img
                    src="@/assets/video/new_all.png"
                    style="width: 17px; height: 17px; margin-right: 5px"
                  />
                  {{ node.label }}
                </span>
                <template v-else-if="node.isLeaf">
                  <span v-if="data.cameraType == 3">
                    <img
                      v-if="data.status === 1"
                      src="@/assets/video/sp_gaod.png"
                      style="width: 14px; height: 14px; margin-right: 5px"
                    />
                    <img
                      v-else
                      src="@/assets/video/sp_gaod_li.png"
                      style="width: 14px; height: 14px; margin-right: 5px"
                    />
                    {{ node.label }}
                  </span>
                  <span v-else-if="data.cameraType == 1">
                    <img
                      v-if="data.status === 1"
                      src="@/assets/video/sp_qiangj.png"
                      style="width: 14px; height: 14px; margin-right: 5px"
                    />
                    <img
                      v-else
                      src="@/assets/video/sp_qiangj_li.png"
                      style="width: 14px; height: 14px; margin-right: 5px"
                    />
                    {{ node.label }}
                  </span>
                  <span v-else-if="data.cameraType == 2">
                    <img
                      v-if="data.status === 1"
                      src="@/assets/video/sp_qiuj.png"
                      style="width: 14px; height: 14px; margin-right: 5px"
                    />
                    <img
                      v-else
                      src="@/assets/video/sp_qiuj_li.png"
                      style="width: 14px; height: 14px; margin-right: 5px"
                    />
                    {{ node.label }}
                  </span>
                  <span v-else>
                    <!-- <img
                      v-if="data.status === 1"
                      src="@/assets/video/sp_qiuj.png"
                      style="width: 14px; height: 14px; margin-right: 5px"
                    />
                    <img
                      v-else
                      src="@/assets/video/sp_qiuj_li.png"
                      style="width: 14px; height: 14px; margin-right: 5px"
                    /> -->
                    {{ node.label }}
                  </span>
                </template>
                <template v-else>
                  <span class="fa-level"
                    >{{ node.label }}
                    <!-- (<span class="same-dian aa-dian"></span>
                    <span class="node-same aa">{{ data.totalsize }}</span
                    ><span class="same-dian bb-dian"></span>
                    <span class="node-same bb">{{ data.onlinesize }}</span
                    ><span class="same-dian cc-dian"></span>
                    <span class="node-same cc">{{ data.offlinesize }}</span
                    >) -->
                  </span>
                </template>
              </template>
            </el-tree>
            <div class="control">
              <img
                @mousedown="PTZControlStart('21')"
                @mouseup="PTZControlStop('21')"
                class="top"
                src="@/assets/video/control/jts.png"
                alt=""
              />
              <img
                @mousedown="PTZControlStart('24')"
                @mouseup="PTZControlStop('24')"
                class="right"
                src="@/assets/video/control/jty.png"
                alt=""
              />
              <img
                @mousedown="PTZControlStart('22')"
                @mouseup="PTZControlStop('22')"
                class="bottom"
                src="@/assets/video/control/jtx.png"
                alt=""
              />
              <img
                @mousedown="PTZControlStart('23')"
                @mouseup="PTZControlStop('23')"
                class="left"
                src="@/assets/video/control/jtz.png"
                alt=""
              />
              <img
                @mousedown="PTZControlStart('26')"
                @mouseup="PTZControlStop('26')"
                class="right-top"
                src="@/assets/video/control/ys.png"
                alt=""
              />
              <img
                @mousedown="PTZControlStart('28')"
                @mouseup="PTZControlStop('28')"
                class="right-bottom"
                src="@/assets/video/control/yx.png"
                alt=""
              />
              <img
                @mousedown="PTZControlStart('25')"
                @mouseup="PTZControlStop('25')"
                class="left-top"
                src="@/assets/video/control/zs.png"
                alt=""
              />
              <img
                @mousedown="PTZControlStart('27')"
                @mouseup="PTZControlStop('27')"
                class="left-bottom"
                src="@/assets/video/control/zx.png"
                alt=""
              />
              <img
                class="center"
                src="@/assets/video/control/center.png"
                alt=""
              />
              <img
                @mousedown="PTZControlStart('11')"
                @mouseup="PTZControlStop('11')"
                class="big"
                src="@/assets/video/control/jia.png"
                alt=""
              />
              <img
                @mousedown="PTZControlStart('12')"
                @mouseup="PTZControlStop('12')"
                class="small"
                src="@/assets/video/control/jian.png"
                alt=""
              />
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!-- 主体部分 -->
    <div class="online-box">
      <!-- 视频窗口 -->
      <div ref="myBoxRef" class="online-right1">
        <div
          v-for="index in num"
          :key="index + '1'"
          @click="handleClick(index)"
          :class="['sameGo', g_index == index - 1 ? 'videoActiveGo' : '']"
        >
          <video-player
            v-if="videoArr[index - 1]"
            :idIndex="index"
            :videoUrl="videoArr[index - 1].url"
            :streamType="videoArr[index - 1].streamType"
            @playerCreated="handlePlayerCreated"
          />
          <div class="video-title" v-show="isVideoShow[index - 1]">
            <div class="r-t">
              <img
                v-show="!isDieJiaBtn[index - 1]"
                @click="handleDieJia(index)"
                src="@/assets/video/die_jia/i1_nor.png"
                alt=""
              />
              <img
                v-show="isDieJiaBtn[index - 1]"
                @click="handleDieJia(index)"
                src="@/assets/video/die_jia/i1_check.png"
                alt=""
              />
              <img
                v-show="isSaveFlag[index - 1] === '0' || !isSaveFlag[index - 1]"
                @click="handleSave(index)"
                src="@/assets/video/sc2.png"
                alt=""
              />
              <img
                v-show="isSaveFlag[index - 1] === '1'"
                @click="handleNoSave(index)"
                src="@/assets/video/sc1.png"
                alt=""
              />
              <!-- 暂停 -->
              <img
                v-if="!videoStatus[index - 1]"
                @click="handlePlay(index)"
                src="@/assets/video/i1.png"
                alt=""
              />
              <img
                v-else
                @click="handlePlay(index)"
                src="@/assets/video/i7.png"
                alt=""
              />
              <img
                v-if="!isRecorder[index - 1]"
                @click="handleRecording(index)"
                src="@/assets/video/i3.png"
                alt=""
              />
              <img
                v-else
                @click="handleRecording(index)"
                src="@/assets/video/i2.png"
                alt=""
              />
              <img
                @click="handleScreenshot(index)"
                src="@/assets/video/i5.png"
                alt=""
              />
              <img
                v-if="num != 1 && !isFullscreen"
                @click="handleFullscreen(index)"
                src="@/assets/video/i6.png"
                alt=""
              />
              <img
                v-else
                @click="handleFullscreen(index)"
                src="@/assets/video/i9.png"
                alt=""
              />
            </div>
          </div>
          <!-- 多个视频窗口有此按钮 -->
          <div
            v-show="num !== 1 && isCloseBtn[index - 1]"
            class="video-close"
            @click="handleClose(index)"
          >
            <i class="el-icon-close"></i>
          </div>
          <!-- 视频叠加模块 -->
          <div v-show="isDieJiaBtn[index - 1]" class="video-die-jia">
            <img class="die-img" src="@/assets/video/die_jia/cbg.png" alt="" />
            <div class="die-jia-c">监测数据</div>
            <!-- v-if="dieJiaArr[index - 1]" -->
            <div v-if="dieJiaArr[index - 1]" class="die-body">
              <div class="die-title">
                {{
                  dieJiaArr[index - 1] ? dieJiaArr[index - 1].segmentName : "--"
                }}
              </div>
              <div class="die-time">
                {{
                  dieJiaArr[index - 1] ? dieJiaArr[index - 1].sampleTime : "--"
                }}
              </div>
              <div
                v-for="(self, current) in dieJiaArr[index - 1].list"
                :key="current"
                class="die-item"
              >
                <div class="item-name">{{ self.ItemName }}</div>
                <div class="item-value">{{ self.EffectiveValue }}</div>
                <div class="item-chao">超标</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 切换分屏模式 -->
      <div class="you-la">
        <div class="screenFen">
          <svg-icon
            icon-class="screen-one"
            @click="changeNum(1)"
            :class="['screenImg', num === 1 ? 'selectActive' : '']"
          />
          <svg-icon
            icon-class="screen-four"
            @click="changeNum(4)"
            :class="['screenImg', num === 4 ? 'selectActive' : '']"
          />
          <svg-icon
            icon-class="screen-nine"
            @click="changeNum(9)"
            :class="['screenImg', num === 9 ? 'selectActive' : '']"
          />
          <svg-icon
            icon-class="screen-sixteen"
            @click="changeNum(16)"
            :class="['screenImg', num === 16 ? 'selectActive' : '']"
          />
        </div>
      </div>
      <!-- 图片 -->
      <My-Dialog
        v-if="dialogVisibleCopyImage"
        :dialogVisibleFa.sync="dialogVisibleCopyImage"
        widthValue="1000px"
        dialogTitle="告警信息查看"
        :isCenter="true"
      >
        <OpenViewNew
          v-if="dialogVisibleCopyImage"
          :dialogVisibleUse.sync="dialogVisibleCopyImage"
          :openImgData="openImgData"
        />
      </My-Dialog>
      <My-Dialog
        v-if="dialogVisibleCopyVideo"
        :dialogVisibleFa.sync="dialogVisibleCopyVideo"
        widthValue="500px"
        dialogTitle="视频录制"
        :isCenter="true"
      >
        <el-form
          ref="formRef"
          :model="dataForm"
          :rules="dataRules"
          label-width="120px"
        >
          <el-form-item label="上传或者下载：" prop="status">
            <el-radio-group v-model="dataForm.status" @input="handleStatus">
              <el-radio :label="1">上传</el-radio>
              <el-radio :label="0">下载</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-show="dataForm.status === 1"
            label="内容："
            prop="content"
          >
            <el-input v-model="dataForm.content"></el-input>
          </el-form-item>
          <el-form-item class="form-btn-box">
            <el-button type="primary" @click="onFinally">保 存</el-button>
            <el-button @click="onCancel">取 消</el-button>
          </el-form-item>
        </el-form>
      </My-Dialog>
    </div>
    <Transition>
      <div v-show="messageDialog" class="message-tips">
        <div class="message-content">{{ backData }}</div>
        <i @click="handleCloseMessage" class="el-icon-close message-close"></i>
      </div>
    </Transition>
    <audio ref="audioDom" src="@/assets/video/warning.mp3"></audio>
  </div>
</template>

<script>
// 方法
import { mapState } from "vuex";
import { getToken } from "@/utils/auth";
import { debonces, treeToArr, getType } from "@/utils/ruoyi";
// 接口
// import {
//   getWaterTree,
//   getCameraPreview,
//   PTZControlAll,
//   getSegmentMonitorItemOverData,
// } from "@/api/video/onlineApi";
// import { updateChannel } from "@/api/video/basicInformationApi.js";
// 组件
import MyDialog from "@/components/MyDialog/index.vue";
import OpenViewNew from "./OpenViewNew.vue";
export default {
  name: "OnlineVideoView",
  components: { MyDialog, OpenViewNew },
  data() {
    return {
      //图片
      dialogVisibleCopyImage: false,
      openImgData: {},
      dataForm: {
        status: 1, //默认上传方式
        content: "",
      },
      dataRules: {
        status: [
          {
            required: true,
            message: "请选择上传方式还是下载方式",
            trigger: "change",
          },
        ],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
      },
      queryData: {}, // 视频上传接口数据
      dialogVisibleCopyVideo: false,
      newUrlV: "",
      newBlobV: "",
      fileType: "",
      newNameV: "",
      // -----------------
      activeName: "1",
      cameraName: "", //树形数据搜索
      tabPosition: "1",
      data: [], //树形数据
      openNodes: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 视频的数据
      num: 4, //窗口模式(1，4，9，16)
      myPlayerArr: [], //视频实例
      videoArr: [],
      g_index: 0,
      lastNum: 1,
      controlStart: {
        id: "",
        iPTZCommand: "",
        speed: "50",
        action: "0",
      },
      controlStop: {
        id: "",
        iPTZCommand: "",
        speed: "50",
        action: "1",
      },
      controlFlag: false, //云控
      isFullscreen: false, //全屏控制
      classStyle: "", //暂存全屏之前的样式
      isVideoShow: [], // 视频的控制按钮
      videoStatus: [], //播放状态
      isCloseBtn: [], //视频关闭按钮
      isSaveFlag: [], //收藏按钮
      isRecorder: [], //录制按钮
      recorderFlag: [], //录制的视频实例
      animationFrame: [], //录制影像
      canvasArray: [], //绘制视频
      // "http://202.102.252.222:7086/live/cameraid/1000004$0/substream/2.m3u8",
      linURLArr: [
        "http://192.168.120.163:8012/live/102/hls.m3u8",
        "http://192.168.120.163:8012/live/101/hls.m3u8",
        "http://192.168.120.163:8012/live/102.live.flv",
        "http://192.168.120.163:8012/live/101.live.flv",
        "http://202.102.252.222:7086/live/cameraid/1000004$0/substream/2.m3u8",
        "http://192.168.120.163:8034/test.mp4",
      ],
      fatherErr: [], // 父级实例化是否报错
      debouncedHandleNodeClick: "",
      totalsize: 0,
      onlinesize: 0,
      offlinesize: 0,
      isDieJiaBtn: [],
      dieJiaArr: [],
      timerIdDieJia: null,
      messageDialog: false,
      backData: "",
    };
  },
  computed: {
    ...mapState({
      userId: (state) => state.user.userId,
    }),
  },
  created() {
    this.getWaterTree();
    this.$nextTick(() => {
      this.changeNum(4);
    });
    this.debouncedHandleNodeClick = debonces(
      this.handleNodeClick.bind(this),
      1000
    );
    this.timerIdDieJia = setInterval(() => {
      this.getNewDieJiaData();
    }, 50 * 60 * 1000);
    this.initWs();
  },
  methods: {
    handlePlayerCreated(e) {
      const { index, player, err } = e;
      console.log(
        e,
        "这是父组件拿到的子组件的实例对象",
        this.g_index,
        "当前的下标",
        index - 1
      );
      this.myPlayerArr[index - 1] = player;
      this.fatherErr[index - 1] = err;
    },
    // ws
    initWs() {
      console.log(this.userId, "用户id");
      const host = window.location.host;
      var websocket = null;
      if ("WebSocket" in window) {
        // websocket = new WebSocket(
        //   `ws://192.168.6.106:8010/websocket/message?userId=${this.userId}`
        // );
        websocket = new WebSocket(
          `ws://${host}/ws/websocket/message?userId=${this.userId}`
        );
        console.log(websocket, "websocket");
        // websocket = new WebSocket(
        //   `ws://192.168.6.129:8086/websocket/message?userId=${this.userId}`
        // );
      } else {
        return false;
      }
      websocket.onclose = function (event) {
        console.log("什么时候关闭了");
      };
      websocket.onopen = function (event) {
        websocket.send("");
      };
      //建立通信后，监听到后端的数据传递
      websocket.onmessage = (event) => {
        const { data } = event;
        console.log(data, "data================>告警收到的消息");
        // const backData = data ? JSON.parse(data) : {};
        this.backData = data ? data : "";
        let dom = this.$refs.audioDom;
        if (data) {
          this.messageDialog = true;
          dom.load();
          dom.play();
        } else {
          this.messageDialog = false;
        }
      };
    },
    // 关闭消息弹框
    handleCloseMessage() {
      this.messageDialog = false;
      let dom = this.$refs.audioDom;
      dom.pause();
    },
    // 关闭云控打开视频列表
    handleAccordion(e) {
      if (!e) {
        this.activeName = "1";
      }
    },
    // 云台控制开始
    PTZControlStart(e) {
      if (this.videoArr.length == 0) {
        return;
      }
      if (this.g_index === 0) {
        //默认选中第一个窗口 (42, 14), (26, 14)
        this.controlStart.id = this.videoArr[0]?.id;
      }
      this.controlStart.iPTZCommand = e;
      // PTZControlAll(this.controlStart)
      //   .then(() => {})
      //   .catch(() => {});
    },
    // 云台控制停止了
    PTZControlStop(e) {
      if (this.g_index === 0) {
        //默认选中第一个窗口   this.controlStop.id = this.videoArr[0]?.url.substr(26, 14);
        this.controlStop.id = this.videoArr[0]?.id;
      }
      this.controlStop.iPTZCommand = e;
      setTimeout(() => {
        // PTZControlAll(this.controlStop)
        //   .then(() => {})
        //   .catch(() => {});
      }, 2000);
    },
    // 初始化视频
    initVideos(i) {
      console.log(
        this.myPlayerArr,
        "99999999999999999",
        i,
        "8888888888",
        this.g_index
      );
      setTimeout(() => {
        if (this.fatherErr[i]) {
          this.isVideoShow[i] = true;
        } else {
          this.isVideoShow[i] = false;
        }
        this.isCloseBtn[i] = true;
        this.isDieJiaBtn[i] = false;
        this.$forceUpdate();
      }, 500);
    },
    changeTab() {
      this.getWaterTree();
    },
    // 属性数据搜索触发
    searchTree() {
      this.getWaterTree();
    },
    // 树形数据( 1河流，2行政区划，3收藏关注)
    async getWaterTree() {
      // this.openNodes = [];
      // const { message, state, data } = await getWaterTree({
      //   cameraName: this.cameraName,
      //   type: this.tabPosition,
      // });
      // if (state === 1) {
      //   this.data = data;
      //   this.totalsize = data[0]?.totalsize ? data[0]?.totalsize : 0;
      //   this.onlinesize = data[0]?.onlinesize ? data[0]?.onlinesize : 0;
      //   this.offlinesize = data[0]?.offlinesize ? data[0]?.offlinesize : 0;
      //   const arrNow = treeToArr(
      //     data,
      //     "id",
      //     "label",
      //     "finallevel",
      //     "children"
      //   );
      //   const objNow = arrNow.find((_) => {
      //     return _.finallevel === "1";
      //   });
      //   this.$nextTick(() => {
      //     this.openNodes.push(objNow.id);
      //   });
      // } else {
      //   this.$message.error(message);
      // }
    },
    // 叠加信息
    // async getSegmentMonitorItemOverData(id, index) {
    //   const { message, state, data } = await getSegmentMonitorItemOverData({
    //     videoId: id,
    //   });
    //   if (state === 1) {
    //     this.dieJiaArr[index] = data;
    //   } else {
    //     this.$message.error(message);
    //   }
    //   console.log(this.dieJiaArr, "我要看看啊");
    // },
    // 轮询
    getNewDieJiaData() {
      console.log(this.dieJiaArr, "轮询之前看一下数据");
      this.$nextTick(() => {
        this.dieJiaArr.forEach((item, index) => {
          if (item?.videoId) {
            // this.getSegmentMonitorItemOverData(item.videoId, index);
          }
        });
      });
    },
    // 公共预览接口（直播）
    // async getCameraPreview(dataQuery, diff, current) {
    //   let obj = {};
    //   obj.videoName = dataQuery.label;
    //   obj.id = dataQuery.id;
    //   obj.cameraType = dataQuery.cameraType;
    //   obj.focus = dataQuery.focus;
    //   obj.cameraType = "";

    //   const { message, state, data, streamType } = await getCameraPreview({
    //     id: dataQuery.id,
    //     // type: ,
    //   });
    //   if (state === 1 && data) {
    //     if (data) {
    //       // 识别视频类型
    //       if (diff === "diff") {
    //         this.myPlayerArr[current].pause();
    //         this.videoArr[current] = null;
    //         obj.url = data;
    //         // obj.url = data.replace("http://192.168.120.163:8012", "/ww");
    //         obj.streamType = streamType;
    //       } else {
    //         // obj.url = data.replace("http://192.168.120.163:8012", "/ww");
    //         obj.url = data;
    //         obj.streamType = streamType;
    //       }
    //       // 由于代理替换的问题这块需要重新筛重
    //       // if (this.videoArr.find((item) => item.url === dataQuery.url)) {
    //       //   // return; //打开筛重功能
    //       // }
    //       this.videoArr[this.g_index] = obj;
    //       console.log(
    //         obj.url,
    //         "接口给的预览地址，前端不需处理之后的",
    //         this.videoArr[this.g_index].streamType
    //       );
    //       this.$nextTick(() => {
    //         this.videoArr.map((item, index) => {
    //           this.isSaveFlag[index] = item.focus;
    //         });
    //       });
    //       this.initVideos(this.g_index);
    //       // this.getSegmentMonitorItemOverData(dataQuery.id, this.g_index);
    //       if (this.g_index >= this.num - 1) {
    //         this.g_index = 0;
    //       } else {
    //         this.g_index++;
    //       }
    //     }
    //   } else {
    //     this.$message.error(message);
    //   }
    // },
    // 请求树形的数据（防抖）
    async handleNodeClick(data, node) {
      debugger;
      console.log("sssssssssssasasas", data, node);
      if (node.isLeaf) {
        if (data?.id && data.status === 1) {
          console.log(this.g_index, "当前的全局窗口下表", this.myPlayerArr);
          if (this.myPlayerArr[this.g_index]) {
            // 此处进行判断，只有循环一圈之后才可以进行赋值
            await this.getCameraPreview(data, "diff", this.g_index);
          } else {
            await this.getCameraPreview(data);
          }
        } else {
          this.$message.warning("该设备不在线");
        }
      }
    },
    // 用来控制窗口样式
    changeNum(e) {
      this.$nextTick(() => {
        this.num = e;
      });
      this.controlFlag = false;
      if (this.g_index) {
        // 将当前索引恢复到真实的索引
        this.g_index--;
      }
      if (this.lastNum > e) {
        // 从大到小
        if (this.videoArr.length > e) {
          this.videoArr = this.videoArr.slice(0, e);
          this.dieJiaArr = this.dieJiaArr.slice(0, e);
          // this.handleDestroy(e);
        }
        if (this.isVideoShow.length > e) {
          this.isVideoShow = this.isVideoShow.slice(0, e);
          this.isCloseBtn = this.isCloseBtn.slice(0, e);
          this.isDieJiaBtn = this.isDieJiaBtn.slice(0, e);
        }
        // this.videoArr.splice(e, this.videoArr.length - e);
        if (this.g_index >= e - 1) {
          // 当前索引大于即将要切换到的模式下的视频数，索引从0开始
          this.g_index = 0;
        } else {
          if (!this.videoArr.length) {
            this.g_index = 0;
          } else {
            // 当前索引小于即将要切换到的模式下的视频数，索引++
            this.g_index++;
          }
        }
      } else {
        // 从小到大
        if (this.lastNum <= this.videoArr.length) {
          // 如果当前模式已满，切换到更多视频模式下时从第一个空缺视频的位置开始
          this.g_index = this.lastNum;
        } else {
          if (!this.videoArr.length) {
            this.g_index = 0;
          } else {
            //如果当前索引大于等于上次模式视频数量，也就是视频数量从小到大时。当前索引++
            this.g_index++;
          }
        }
      }
      this.lastNum = e;
      if (e == 4) {
        this.$refs.myBoxRef.classList.remove(...this.$refs.myBoxRef.classList);
        this.$refs.myBoxRef.classList.add("online-right4");
      } else if (e == 9) {
        this.$refs.myBoxRef.classList.remove(...this.$refs.myBoxRef.classList);
        this.$refs.myBoxRef.classList.add("online-right9");
      } else if (e == 16) {
        this.$refs.myBoxRef.classList.remove(...this.$refs.myBoxRef.classList);
        this.$refs.myBoxRef.classList.add("online-right16");
      } else {
        this.$refs.myBoxRef.classList.remove(...this.$refs.myBoxRef.classList);
        this.$refs.myBoxRef.classList.add("online-right1");
      }
    },
    // 点击某个视频
    handleClick(index) {
      this.g_index = index - 1;
      this.controlStart.id = this.videoArr[this.g_index]?.id;
      this.controlStop.id = this.videoArr[this.g_index]?.id;
    },
    // 进行关注操作
    handleSave(e) {
      let id = this.videoArr[e - 1].id;
      let name = this.videoArr[e - 1].videoName;
      // updateChannel({
      //   id: id,
      //   focus: "1",
      //   name: name,
      // }).then(() => {
      //   this.$message.success("关注成功");
      //   this.isSaveFlag[e - 1] = "1";
      //   this.$forceUpdate();
      // });
    },
    // 取消关注操作
    handleNoSave(e) {
      let id = this.videoArr[e - 1].id;
      let name = this.videoArr[e - 1].videoName;
      // updateChannel({
      //   id: id,
      //   focus: "0",
      //   name: name,
      // }).then(() => {
      //   this.$message.success("取消关注成功");
      //   this.isSaveFlag[e - 1] = "0";
      //   this.$forceUpdate();
      // });
    },
    // 全屏播放
    handleFullscreen(e) {
      if (this.isFullscreen) {
        //非全屏
        this.isFullscreen = false;
        this.$refs.myBoxRef.classList.remove(...this.$refs.myBoxRef.classList);
        this.$refs.myBoxRef.classList.add(this.classStyle);
        for (
          let index = 0;
          index < this.$refs.myBoxRef.children.length;
          index++
        ) {
          this.$refs.myBoxRef.children[index].style.zIndex = 1;
        }
      } else {
        this.isFullscreen = true;
        //全屏
        this.classStyle = this.$refs.myBoxRef.classList[0];
        this.$refs.myBoxRef.classList.remove(...this.$refs.myBoxRef.classList);
        this.$refs.myBoxRef.classList.add("fullscreen");
        for (
          let index = 0;
          index < this.$refs.myBoxRef.children.length;
          index++
        ) {
          if (index + 1 === e) {
            this.$refs.myBoxRef.children[index].style.zIndex = 9;
          } else {
            this.$refs.myBoxRef.children[index].style.zIndex = -1;
          }
        }
      }
      this.$forceUpdate();
    },
    // 关闭某个窗口
    handleClose(e) {
      let i = e - 1;
      this.g_index = i;
      this.$set(this.videoArr, i, null);
      this.$set(this.dieJiaArr, i, null);
      // 关闭对应的按钮
      this.handleGuanBiBtn(i);
    },
    // 关闭按钮标签
    handleGuanBiBtn(e) {
      this.isVideoShow[e] = false;
      this.isCloseBtn[e] = false;
      this.isDieJiaBtn[e] = false;
      this.videoStatus[e] = false;
    },
    // 叠加操作
    handleDieJia(e) {
      let i = e - 1;
      this.isDieJiaBtn[i] = !this.isDieJiaBtn[i];
      this.$forceUpdate();
    },
    // 开始（播放+暂停）
    handlePlay(e) {
      let i = e - 1;
      this.videoStatus[i] = !this.videoStatus[i];
      if (this.videoStatus[i] == false) {
        this.myPlayerArr[i].play();
      } else {
        this.myPlayerArr[i].pause();
      }
      this.$forceUpdate();
    },
    // 销毁无用的video实例解决资源
    handleDestroy(start) {
      let currentStart = 0;
      if (start) {
        currentStart = start;
      }
      if (this.myPlayerArr.length) {
        for (let i = currentStart; i < this.myPlayerArr.length; i++) {
          if (this.myPlayerArr[i]) {
            this.myPlayerArr[i].destroy();
            this.myPlayerArr[i] = null;
          }
        }
      }
    },
    // 截图
    handleScreenshot(index) {
      let i = index - 1;
      let name = this.videoArr[i].videoName;
      let id = this.videoArr[i]?.id;
      const fileType = "png";
      // ==== 使用西瓜自己的截图方法 ===
      // let a = this.myPlayerArr[i].saveScreenShot();
      // console.log(this.myPlayerArr[i], "截图操操操操操", a);
      // 找到需要截图的video标签
      // video 实列
      const video = this.myPlayerArr[i].root.querySelector("video");
      const canvas = document.createElement("canvas");
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      canvas
        .getContext("2d")
        .drawImage(video, 0, 0, canvas.width, canvas.height); // 图片大小和视频分辨率一致
      const strDataURL = canvas.toDataURL("image/" + fileType); // canvas中video中取一帧图片并转成dataURL
      let arr = strDataURL.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      const blob = new Blob([u8arr], {
        type: mime,
      });
      const url = window.URL.createObjectURL(blob);
      // 开始上传逻辑
      this.dialogVisibleCopyImage = true;
      this.openImgData = {
        picture: url,
        id: id,
        name: name,
      };
      // downloadFile(url, fileType, name);
    },
    // 开始录制
    handleRecording(index) {
      let i = index - 1;
      let name = this.videoArr[i].videoName;
      this.isRecorder[i] = !this.isRecorder[i];
      this.$forceUpdate();
      this.transcribe(i, name);
    },
    transcribe(i, name) {
      // const fileType = "mp4";
      if (this.isRecorder[i]) {
        if (!this.canvasArray[i])
          this.canvasArray[i] = document.createElement("canvas");
        this.recorderFlag[i] = this.$recordRTC(this.canvasArray[i], {
          type: "canvas",
        });
        this.recorderFlag[i].startRecording();
        this.drawMedia(i);
      } else {
        this.recorderFlag[i].stopRecording(() => {
          const url = window.URL.createObjectURL(
            this.recorderFlag[i].getBlob()
          );
          this.dialogVisibleCopyVideo = true;
          this.newUrlV = url;
          this.newNameV = name;
          this.fileType = "mp4";
          cancelAnimationFrame(this.animationFrame[i]);
          this.canvasArray[i] = null;
          this.animationFrame[i] = null;
        });
      }
    },
    // 刷新canvas
    drawMedia(i) {
      const ctx = this.canvasArray[i].getContext("2d");
      // 找到需要截图的video标签
      const video = this.myPlayerArr[i].root.querySelector("video");
      this.canvasArray[i].setAttribute("width", video.videoWidth);
      this.canvasArray[i].setAttribute("height", video.videoHeight);
      ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
      // requestAnimationFrame 根据电脑显示帧数进行循环
      this.animationFrame[i] = requestAnimationFrame(() => this.drawMedia(i));
    },
    // 视频上传或者下载新逻辑
    async fileVideo(blobUrl) {
      try {
        // 使用fetch API获取Blob对象
        const response = await fetch(blobUrl);
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        const blob = await response.blob();

        // 创建一个新的File对象
        const file = new File([blob], "filename.mp4", {
          type: "video/mp4",
          lastModified: Date.now(),
        });
        // 现在可以使用file对象，比如将它添加到FormData中用于上传
        const formData = new FormData();
        formData.append("content", this.dataForm.content);
        formData.append("cameraId", this.videoArr[this.g_index]?.id);
        formData.append("file", file);
        return formData;
      } catch (error) {
        console.error("Error fetching blob:", error);
        throw error; // 可选：重新抛出错误以便上层调用者可以处理
      }
    },
    // 在此处调用接口并传参
    onFinally() {
      console.log(this.dataForm, ")))", this.newUrlV);
      if (this.dataForm.status === 0) {
        downloadFile(this.newUrlV, this.fileType, this.newNameV);
      } else {
        this.$refs.formRef.validate(async (valid) => {
          if (valid) {
            // 上传到服务器的逻辑
            this.fileVideo(this.recorderFlag[this.g_index].getBlob())
              .then((res) => {
                fetch(
                  "http://10.194.185.226:5001/ytpt/video_api/base/uplaodFile",
                  {
                    method: "POST",
                    body: res,
                    // 阻止浏览器预处理请求体，因为FormData的Content-Type头会被自动设置
                    headers: {
                      Authorization: "Bearer " + getToken(),
                      // "Content-Type": "multipart/form-data", // 注意：通常不需要手动设置，Fetch API会自动处理
                    },
                  }
                )
                  .then((response) => response.json()) // 根据服务器响应格式解析
                  .then((data) => {
                    this.$message.success("上传成功");
                    this.onCancel();
                  })
                  .catch((error) => console.error("Error:", error));
              })
              .catch((err) => {
                console.log(err, "报错了");
              });
          }
        });
      }
    },
    // 取消（关闭视频弹框）
    onCancel() {
      this.dataForm.content = "";
      this.dataForm.id = "";
      this.dialogVisibleCopyVideo = false;
    },
    // 上传or下载
    handleStatus() {
      this.dataForm.content = "";
    },
  },
  // 销毁组件时销毁视频
  beforeDestroy() {
    // this.handleDestroy();
    setTimeout(() => {
      this.videoArr = [];
      this.myPlayerArr = [];
    }, 1000);
    clearInterval(this.timerIdDieJia);
    console.log("销毁", this.myPlayerArr);
  },
};
</script>

<style scoped lang="scss">
.online-container {
  padding: 12px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  position: relative;
  .v-enter-active,
  .v-leave-active {
    transition: opacity 1.5s ease;
  }

  .v-enter-from,
  .v-leave-to {
    opacity: 0;
  }
  .message-tips {
    z-index: 1000;
    position: absolute;
    ::-webkit-scrollbar {
      visibility: hidden;
      width: 0; /* 垂直滚动条的宽度 */
    }
    background-color: #ffffff;
    width: 260px;
    padding: 8px 12px;
    height: 150px;
    bottom: 5px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    .message-close {
      position: absolute;
      right: 3px;
      top: 2px;
      cursor: pointer;
    }
    .message-content {
      overflow: hidden;
      overflow-y: auto;
      width: 100%;
      max-height: 80%;
      text-align: center;
    }
  }
  .online-left {
    ::v-deep .el-collapse-item__wrap {
      // border-bottom: 1px solid #ebeef5;
      border-bottom: none !important;
    }
    ::v-deep .el-collapse-item__content {
      padding-bottom: 0;
    }
    flex-shrink: 0;
    box-sizing: border-box;
    width: 310px;
    // height: 970px;
    height: calc(100vh - 90px);
    background: #ffffff;
    border-radius: 4px;
    ::v-deep .el-collapse-item__header {
      padding: 0 10px;
      font-size: 15px;
      color: #444;
    }
    .total-box {
      display: flex;
      width: 300px;
      height: 47px;
      margin: 5px auto;

      .sa-box {
        width: 33%;
        height: 100%;
        font-size: 16px;
        font-weight: 400;
        .top {
          text-align: center;
          line-height: 16px;
          height: 16px;
          color: #333333;
          font-family: "SourceHanSansCN-Normal";
        }
        .bottom {
          text-align: center;
          line-height: 34px;
          height: 30px;
          font-family: "BarlowCondensed-SemiBold";
          font-size: 24px;
        }
        .b-total {
          color: #409eff;
        }
        .b-online {
          color: #49b72a;
        }
        .b-no {
          color: #f44e46;
        }
      }
      .diff-box {
        border-left: 1px solid #e5e5e5;
        border-right: 1px solid #e5e5e5;
      }
    }
    .search {
      padding: 9px 5px 9px 7px;
      display: flex;
      /* 为啥不起作用 */
      justify-content: space-between;
      align-items: center;
      .el-put {
        width: 290px;
        margin-right: 6px;
      }
      .btn {
        border: 1px solid red;
        width: 50px;
        height: 36px;
        cursor: pointer;
      }
    }
    .change {
      ::v-deep .el-radio-group {
        margin-left: 5px;
      }
      ::v-deep .el-radio-button__inner {
        width: 100px;
      }
      ::-webkit-scrollbar {
        width: 2px; /* 垂直滚动条的宽度 */
        // height: 10px; /* 水平滚动条的高度 */
      }
      .body-tree {
        margin-top: 20px;
        padding: 0 12px;
        height: 390px;
        overflow: hidden;
        overflow-y: scroll;
        font-size: 16px;
        span {
          user-select: none;
        }
        .fa-level {
          display: flex;
          align-items: center;
        }
        .aa {
          color: #409eff;
        }
        .bb {
          color: #49b72a;
        }
        .cc {
          color: #f44e46;
          margin-right: 5px;
        }
        .same-dian {
          display: inline-block;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          margin-left: 5px;
          margin-right: 2px;
        }
        .aa-dian {
          background-color: #409eff;
        }
        .bb-dian {
          background-color: #49b72a;
        }
        .cc-dian {
          background-color: #f44e46;
        }
      }
      .control {
        margin: 0 auto;
        margin-top: 20px;
        background-image: url("~@/assets/video/control/dz.png");
        width: 167px;
        height: 196px;
        position: relative;
        .top {
          cursor: pointer;
          width: 14px;
          height: 17px;
          position: absolute;
          top: 12px;
          left: 50%;
          transform: translateX(-50%);
        }
        .right {
          cursor: pointer;
          width: 14px;
          height: 17px;
          position: absolute;
          top: 65px;
          right: 22px;
        }
        .bottom {
          cursor: pointer;
          width: 14px;
          height: 17px;
          position: absolute;
          top: 118px;
          left: 50%;
          transform: translateX(-50%);
        }
        .left {
          cursor: pointer;
          width: 14px;
          height: 17px;
          position: absolute;
          top: 65px;
          left: 22px;
        }
        .right-top {
          cursor: pointer;
          position: absolute;
          right: 33px;
          top: 30px;
        }
        .right-bottom {
          cursor: pointer;
          position: absolute;
          right: 34px;
          top: 101px;
        }
        .left-top {
          cursor: pointer;
          position: absolute;
          left: 34px;
          top: 30px;
        }
        .left-bottom {
          cursor: pointer;
          position: absolute;
          left: 34px;
          top: 101px;
        }
        .center {
          width: 26px;
          height: 25px;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 62px;
        }
        .big {
          cursor: pointer;
          width: 24px;
          height: 25px;
          position: absolute;
          left: 30px;
          bottom: 10px;
        }
        .small {
          cursor: pointer;
          width: 24px;
          height: 25px;
          position: absolute;
          right: 30px;
          bottom: 10px;
        }
      }
    }
  }
  .online-box {
    position: relative;
    border-radius: 4px;
    min-width: 906px;
    width: calc(100% - 320px);
    height: 100%;
    .you-la {
      position: absolute;
      bottom: 5px;
      right: 0;
      .screenFen {
        display: flex;
        align-items: center;
        .selectActive {
          color: #409eff;
        }
        .screenImg {
          width: 24px;
          height: 24px;
          margin: 0 6px;
          cursor: pointer;
        }
      }
    }
    .online-right1 {
      width: 100%;
      height: calc(100% - 40px);
      box-sizing: border-box;
      background: #000000;
      border-radius: 4px;
      display: flex;
      align-content: flex-start;
      flex-wrap: wrap;
      .sameGo {
        position: relative;
        border: 1px solid white;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        ::-webkit-scrollbar {
          visibility: hidden;
          width: 0; /* 垂直滚动条的宽度 */
        }
        // 一个屏
        .video-title {
          z-index: 1000; //需要比自定义错误样式大
          position: absolute;
          bottom: 0;
          height: 64px;
          width: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          display: flex;
          justify-content: flex-end;
          align-content: center;
          .r-t {
            display: flex;
            align-items: center;
            img {
              width: 36px;
              height: 36px;
              margin-right: 22px;
              cursor: pointer;
            }
          }
        }
        // 叠加
        .video-die-jia {
          z-index: 1000;
          position: absolute;
          top: 15px;
          left: 10px;
          width: 160px;
          height: 140px;
          background-color: rgba(255, 255, 255, 0.9);
          border-radius: 4px;
          border-top-left-radius: 7px;
          border: 1px solid #307eff;
          .die-jia-c {
            position: absolute;
            top: 0;
            left: 4px;
            color: #ffffff;
            font-size: 16px;
            font-weight: 400;
          }
          .die-body {
            overflow: hidden;
            overflow-y: auto;
            width: 100%;
            height: calc(140px - 30px);

            .die-title {
              margin-left: 4px;
              font-size: 18px;
              font-weight: 400;
              white-space: nowrap; /* 禁止文本换行 */
              overflow: hidden; /* 隐藏溢出内容 */
              text-overflow: ellipsis; /* 使用省略号表示溢出文本 */
            }
            .die-time {
              margin-left: 4px;
              font-size: 16px;
            }
            .die-item {
              margin: 0 4px;
              height: 30px;
              display: flex;
              align-items: center;
              // justify-content: space-between;

              .item-name {
                font-family: "Source Han Sans CN";
                font-weight: 400;
                font-size: 16px;
                color: #333333;
                width: 45%;
              }
              .item-value {
                width: 35%;
                font-family: "Barlow Condensed SemiBold";
                font-weight: 400;
                font-size: 18px;
                // color: #333333;
                color: #f44e46;
              }
              .item-chao {
                // width: 20%;
                width: 42px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                font-family: "Source Han Sans CN";
                background-color: rgb(238, 205, 201);
                border-radius: 4px;
                color: #f44e46;
              }
            }
          }
        }
      }
      .videoActiveGo {
        z-index: 10;
        border: 1px solid yellow !important;
      }
    }
    .online-right4 {
      height: calc(100% - 40px);
      width: 100%;
      box-sizing: border-box;
      background: #000000;
      border-radius: 4px;
      display: flex;
      align-content: flex-start;
      flex-wrap: wrap;
      .sameGo {
        position: relative;
        border: 1px solid white;
        box-sizing: border-box;
        width: 50%;
        height: 50%;
        ::-webkit-scrollbar {
          visibility: hidden;
          width: 0; /* 垂直滚动条的宽度 */
        }
        .video-close {
          cursor: pointer;
          position: absolute;
          z-index: 1000; //大于报错的页面
          top: 5px;
          right: 8px;
          width: 23px;
          height: 23px;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgba($color: #ffffff, $alpha: 0.6);
        }
        // 四个屏幕的优化
        .video-title {
          z-index: 1000; //需要比自定义错误样式大
          position: absolute;
          bottom: 0;
          height: 40px;
          width: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          display: flex;
          justify-content: flex-end;
          align-content: center;
          .r-t {
            display: flex;
            align-items: center;
            img {
              width: 24px;
              height: 24px;
              margin-right: 15px;
              cursor: pointer;
            }
          }
        }
        // 叠加
        .video-die-jia {
          z-index: 1000;
          position: absolute;
          top: 15px;
          left: 10px;
          width: 160px;
          height: 140px;
          background-color: rgba(255, 255, 255, 0.9);
          border-radius: 4px;
          border-top-left-radius: 7px;
          border: 1px solid #307eff;
          .die-jia-c {
            position: absolute;
            top: 0;
            left: 4px;
            color: #ffffff;
            font-size: 16px;
            font-weight: 400;
          }
          .die-body {
            overflow: hidden;
            overflow-y: auto;
            width: 100%;
            height: calc(140px - 30px);

            .die-title {
              margin-left: 4px;
              font-size: 18px;
              font-weight: 400;
              white-space: nowrap; /* 禁止文本换行 */
              overflow: hidden; /* 隐藏溢出内容 */
              text-overflow: ellipsis; /* 使用省略号表示溢出文本 */
            }
            .die-time {
              margin-left: 4px;
              font-size: 16px;
            }
            .die-item {
              margin: 0 4px;
              height: 30px;
              display: flex;
              align-items: center;
              // justify-content: space-between;

              .item-name {
                font-family: "Source Han Sans CN";
                font-weight: 400;
                font-size: 16px;
                color: #333333;
                width: 45%;
              }
              .item-value {
                width: 35%;
                font-family: "Barlow Condensed SemiBold";
                font-weight: 400;
                font-size: 18px;
                // color: #333333;
                color: #f44e46;
              }
              .item-chao {
                // width: 20%;
                width: 42px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                font-family: "Source Han Sans CN";
                background-color: rgb(238, 205, 201);
                border-radius: 4px;
                color: #f44e46;
              }
            }
          }
        }
      }
      .videoActiveGo {
        z-index: 10;
        border: 1px solid yellow !important;
      }
    }
    .online-right9 {
      height: calc(100% - 40px);
      width: 100%;
      box-sizing: border-box;
      background: #000000;
      border-radius: 4px;
      display: flex;
      align-content: flex-start;
      flex-wrap: wrap;
      .sameGo {
        position: relative;
        border: 1px solid white;
        box-sizing: border-box;
        width: 33.333%;
        height: 33.333%;
        ::-webkit-scrollbar {
          visibility: hidden;
          width: 0; /* 垂直滚动条的宽度 */
        }
        .video-close {
          cursor: pointer;
          position: absolute;
          z-index: 1000; //大于报错的页面
          top: 5px;
          right: 8px;
          width: 23px;
          height: 23px;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgba($color: #ffffff, $alpha: 0.6);
        }
        // 四个屏幕的优化
        .video-title {
          z-index: 1000; //需要比自定义错误样式大
          position: absolute;
          bottom: 0;
          height: 40px;
          width: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          display: flex;
          justify-content: flex-end;
          align-content: center;
          .r-t {
            display: flex;
            align-items: center;
            img {
              width: 24px;
              height: 24px;
              margin-right: 15px;
              cursor: pointer;
            }
          }
        }
        // 叠加
        .video-die-jia {
          z-index: 1000;
          position: absolute;
          top: 15px;
          left: 10px;
          width: 160px;
          height: 140px;
          background-color: rgba(255, 255, 255, 0.9);
          border-radius: 4px;
          border-top-left-radius: 7px;
          border: 1px solid #307eff;
          .die-jia-c {
            position: absolute;
            top: 0;
            left: 4px;
            color: #ffffff;
            font-size: 16px;
            font-weight: 400;
          }
          .die-body {
            overflow: hidden;
            overflow-y: auto;
            width: 100%;
            height: calc(140px - 30px);

            .die-title {
              margin-left: 4px;
              font-size: 18px;
              font-weight: 400;
              white-space: nowrap; /* 禁止文本换行 */
              overflow: hidden; /* 隐藏溢出内容 */
              text-overflow: ellipsis; /* 使用省略号表示溢出文本 */
            }
            .die-time {
              margin-left: 4px;
              font-size: 16px;
            }
            .die-item {
              margin: 0 4px;
              height: 30px;
              display: flex;
              align-items: center;
              // justify-content: space-between;

              .item-name {
                font-family: "Source Han Sans CN";
                font-weight: 400;
                font-size: 16px;
                color: #333333;
                width: 45%;
              }
              .item-value {
                width: 35%;
                font-family: "Barlow Condensed SemiBold";
                font-weight: 400;
                font-size: 18px;
                // color: #333333;
                color: #f44e46;
              }
              .item-chao {
                // width: 20%;
                width: 42px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                font-family: "Source Han Sans CN";
                background-color: rgb(238, 205, 201);
                border-radius: 4px;
                color: #f44e46;
              }
            }
          }
        }
      }
      .videoActiveGo {
        z-index: 10;
        border: 1px solid yellow !important;
      }
    }
    .online-right16 {
      height: calc(100% - 40px);
      width: 100%;
      box-sizing: border-box;
      border-radius: 4px;
      background: #000000;
      display: flex;
      align-content: flex-start;
      flex-wrap: wrap;
      .sameGo {
        position: relative;
        border: 1px solid white;
        box-sizing: border-box;
        width: 25%;
        height: 25%;
        ::-webkit-scrollbar {
          visibility: hidden;
          width: 0; /* 垂直滚动条的宽度 */
        }
        .video-close {
          cursor: pointer;
          position: absolute;
          z-index: 1000; //大于报错的页面
          top: 5px;
          right: 8px;
          width: 23px;
          height: 23px;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgba($color: #ffffff, $alpha: 0.6);
        }
        // 16个屏幕的优化
        .video-title {
          z-index: 1000; //需要比自定义错误样式大
          position: absolute;
          bottom: 0;
          height: 32px;
          width: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          display: flex;
          justify-content: flex-end;
          align-content: center;
          .r-t {
            display: flex;
            align-items: center;
            img {
              width: 18px;
              height: 18px;
              margin-right: 12px;
              cursor: pointer;
            }
          }
        }
        // 叠加
        .video-die-jia {
          z-index: 1000;
          position: absolute;
          top: 15px;
          left: 10px;
          width: 160px;
          height: 140px;
          background-color: rgba(255, 255, 255, 0.9);
          border-radius: 4px;
          border-top-left-radius: 7px;
          border: 1px solid #307eff;
          .die-jia-c {
            position: absolute;
            top: 0;
            left: 4px;
            color: #ffffff;
            font-size: 16px;
            font-weight: 400;
          }
          .die-body {
            overflow: hidden;
            overflow-y: auto;
            width: 100%;
            height: calc(140px - 30px);

            .die-title {
              margin-left: 4px;
              font-size: 18px;
              font-weight: 400;
              white-space: nowrap; /* 禁止文本换行 */
              overflow: hidden; /* 隐藏溢出内容 */
              text-overflow: ellipsis; /* 使用省略号表示溢出文本 */
            }
            .die-time {
              margin-left: 4px;
              font-size: 16px;
            }
            .die-item {
              margin: 0 4px;
              height: 30px;
              display: flex;
              align-items: center;
              // justify-content: space-between;

              .item-name {
                font-family: "Source Han Sans CN";
                font-weight: 400;
                font-size: 16px;
                color: #333333;
                width: 45%;
              }
              .item-value {
                width: 35%;
                font-family: "Barlow Condensed SemiBold";
                font-weight: 400;
                font-size: 18px;
                // color: #333333;
                color: #f44e46;
              }
              .item-chao {
                // width: 20%;
                width: 42px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                font-family: "Source Han Sans CN";
                background-color: rgb(238, 205, 201);
                border-radius: 4px;
                color: #f44e46;
              }
            }
          }
        }
      }
      .videoActiveGo {
        z-index: 10;
        border: 1px solid yellow !important;
      }
    }
    .fullscreen {
      width: calc(100% - 340px);
      height: calc(100% - 85px);
      box-sizing: border-box;
      background: #000000;
      border-radius: 4px;
      position: fixed;
      overflow: hidden;
      top: 80px;
      right: 12px;
      z-index: 99;
      .sameGo {
        border: 1px solid white;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        position: absolute;
        ::-webkit-scrollbar {
          visibility: hidden;
          width: 0; /* 垂直滚动条的宽度 */
        }
        // 全屏
        .video-title {
          z-index: 1000; //需要比自定义错误样式大
          position: absolute;
          bottom: 0;
          height: 64px;
          width: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          display: flex;
          justify-content: flex-end;
          align-content: center;
          .r-t {
            display: flex;
            align-items: center;
            img {
              width: 36px;
              height: 36px;
              margin-right: 22px;
              cursor: pointer;
            }
          }
        }
        // 叠加
        .video-die-jia {
          z-index: 1000;
          position: absolute;
          top: 15px;
          left: 10px;
          width: 160px;
          height: 140px;
          background-color: rgba(255, 255, 255, 0.9);
          border-radius: 4px;
          border-top-left-radius: 7px;
          border: 1px solid #307eff;
          .die-jia-c {
            position: absolute;
            top: 0;
            left: 4px;
            color: #ffffff;
            font-size: 16px;
            font-weight: 400;
          }
          .die-body {
            overflow: hidden;
            overflow-y: auto;
            width: 100%;
            height: calc(140px - 30px);

            .die-title {
              margin-left: 4px;
              font-size: 18px;
              font-weight: 400;
              white-space: nowrap; /* 禁止文本换行 */
              overflow: hidden; /* 隐藏溢出内容 */
              text-overflow: ellipsis; /* 使用省略号表示溢出文本 */
            }
            .die-time {
              margin-left: 4px;
              font-size: 16px;
            }
            .die-item {
              margin: 0 4px;
              height: 30px;
              display: flex;
              align-items: center;
              // justify-content: space-between;

              .item-name {
                font-family: "Source Han Sans CN";
                font-weight: 400;
                font-size: 16px;
                color: #333333;
                width: 45%;
              }
              .item-value {
                width: 35%;
                font-family: "Barlow Condensed SemiBold";
                font-weight: 400;
                font-size: 18px;
                // color: #333333;
                color: #f44e46;
              }
              .item-chao {
                // width: 20%;
                width: 42px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                font-family: "Source Han Sans CN";
                background-color: rgb(238, 205, 201);
                border-radius: 4px;
                color: #f44e46;
              }
            }
          }
        }
      }
      .videoActiveGo {
        border: 1px solid yellow !important;
      }
    }
  }
}
</style>
